<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 导入css样式 -->
		<link href="../../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../../lib/js/bootstrap.min.js" ></script>
	</head>
	<body>
		<h1>1-使用模态框</h1>
		
		<!-- 模态框（Modal） -->
		<!--<div class="col-md-6"></div>-->
		<div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog " style="width:300px;">
				<div class="modal-content" style="width:300px;height:200px;" >
					<div class="modal-header">
						<!-- 关闭按钮 -->
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
		                  &times;
		            	</button>
						<h4 class="modal-title" id="myModalLabel">通知</h4>
		            	<!--<div class="modal-body">按下 ESC 按钮退出</div>-->
					</div>
					<!-- 正文内容 -->
					<div class="modal-body" style="width:300px;height:80px;">
						在这里添加一些文本
					</div>
					<!-- 注解的两个按钮 -->
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
						<!--<button type="button" class="btn btn-primary">提交更改</button>-->
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
		
		
		<button onclick="showAlert('这个一个模拟的Alert!');">显示模态弹窗</button>
		<script>
			$(function(){
				showAlert("刚进来就通知!!!");
			});
			function showAlert(msg){
				var msgStyle = "<font color='red'>"+ msg +"</font>";//通知信息添加样式
				//设置模态框的内容
				$('#myModal .modal-body').html(msgStyle);
				//设置模态框的位置为水平垂直居中
				$('#myModal').on('show.bs.modal', function (e) {
		            // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零  
		            $(this).css('display', 'block');  
		            var modalHeight=$(window).height() / 2 - $('#myModal .modal-dialog').height() / 2; 
		            $(this).find('.modal-dialog').css({  
		                'margin-top': modalHeight 
		            });  
		        });
		        //显示模态框
				$('#myModal').modal({
				    keyboard: true//表示按下esc按键的时候关闭模态窗,默认是true
				});
			}
			
		</script>
		
		<h1>1-使用alert</h1>
		<style>
			.closeDiv{
				width: 300px;
				height: 30px;
			}
			.alertClose{
				display:block;float:right;margin-top:10px;
				margin-right:10px;width:15px;height:15px;
			}
			#myalert a:hover{text-decoration:none;}
			.alertMsg{
				display: block;
				width: 260px;
				height: 230px;
				border: #ccc solid 1px;
				border-radius: 5px;
				margin-left:20px;
				margin-right: 20px;
				margin-top: 10px;
				background-color: #fff;
				padding: 5px ;
			}
		<style>
			
		</style>
		
		<center>
		<!--<div style="width: 300px;height: 300px;">-->
		<div id="myalert" style="display:none;width:300px;height:300px;">
		   <div class="closeDiv">
		   <a href="javascript:void(0);" onclick="closeAlert();" class="alertClose">
		      	✖
		   </a>
		   </div>
		   <div class="alertMsg"><strong>警告！</strong>您的网络连接有问题。</div>
		</div>
		<!--</div>-->
		</center>
		<button onclick="showAlert2('这个一个模拟的Alert!');">显示Alert弹窗</button>
		<script>
			//弹框的样式
			var alertCss = {
				"display":"block","width":"300px",
				"height":"300px","background-color":"#f2dede",
				"border":"#f2dede solid 1px","border-radius":"5px",
				"text-align":"center"
			}
			function showAlert2(msg){
				$("#myalert").css(alertCss);
				$('#myalert').bind('close.bs.alert', function () {
				  // ... 
				  console.log("alert close ... !!! ");
				})
			}
			function closeAlert(){
				$("#myalert").css({"display":"none"});
			}
		</script>
		
		
	</body>
</html>
